<template>
	<widget-root :styles="styles">
		<view class="user-serve" :style="{
	                'background-color': styles.bg_color, 
	                'border-radius': `${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx`
	            }">
			<view class="serve-title">
				<view class="bold">{{content.text}}</view>
			</view>
			<view class="serve-nav flex flex-wrap">
				<block v-for="(item, index) in content.data" :key="index">
					<view class="nav-item flex-col col-center" v-if="item.link.path == 'customer_service'">
						<u-button :plain="true" open-type="contact" :custom-style="{
							padding: '0',
							width:'100%'
						}" type="" :hair-line="false" size="medium">
							<view style="margin-top: -12rpx;">
								<u-image width="52rpx" height="52rpx" :src="$getImageUri(item.url)" />
								<view class="xs m-t-12" :style="{marginTop:'-6rpx',height:'20rpx'}">{{item.name}}
								</view>
							</view>
						</u-button>
					</view>
					<view class="nav-item flex-col col-center" v-else @tap="navigate(item)">
						<u-image width="52rpx" height="52rpx" :src="$getImageUri(item.url)" />
						<view class="xs m-t-12">{{item.name}}</view>
					</view>
				</block>
			</view>
		</view>
	</widget-root>
</template>

<script type="text/javascript">
	export default {
		props: {

			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
		},
		data() {
			return {

			}
		},
		methods: {
			navigate(item) {
				if (item.appid != undefined && item.appid != '') {
					uni.navigateToMiniProgram({
						appId: item.appid,
						path: item.app_path,
						success: (res) => {
							// console.log(res)
						}
					})
				} else {
					const {
						path,
						params,
						type
					} = item.link
					if (type == 'call_phone') {
						uni.makePhoneCall({
							phoneNumber: params.phone
						})
					} else if (type == 'send_msg') {
						uni.sendSms({
							phoneNumber: params.phone
						})
					} else {
						if (!path) return
						this.$Router.push({
							path: path,
							query: params
						})
					}
				}
			}
		},
		computed: {

		}
	};
</script>

<style lang="scss" scoped>
	.user-serve {
		.serve-title {
			border-bottom: $-solid-border;
			padding: 24rpx 30rpx;
		}

		.serve-nav {
			padding: 26rpx 0 0;

			.nav-item {
				width: 25%;
				margin-bottom: 30rpx;
			}
		}
	}
</style>